var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
	clicksToMoveEditor: 1,
	autoCancel: false
});
	
Ext.define('framenet.view.framePanel', {
	extend: 'Ext.Panel',
	alias: 'widget.framePanel',
	frameGrid: null,
	frameDetail: null,
	
	constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        
        me.callParent([Ext.apply({
        	id: cfg.title,
        	title: cfg.title,
    		layout: 'fit',
        	closable: true,
        	/*defaults: {
        	    collapsible: true,
        	    split: true
        	},*/
			dockedItems: [{
				xtype: 'toolbar',
				dock: 'top',
				items: [{
							iconCls: 'button-save',
							text: 'Save',
							handler: function() {
								me.frameDetail.getForm().updateRecord();
								me.frameDetail.store.sync();
								me.frameDetail.hide();
								me.frameGrid.show();
							}
						},
						{
							iconCls: 'button-add',
							text: 'Add',
							handler: function() {
								me.frameGrid.hide();
								me.frameDetail.show();

								var newRecord = Ext.create(me.frameGrid.store.model);
								me.frameGrid.store.insert(0, newRecord);
								me.frameDetail.loadRecord(newRecord);
							}
						},
						{
							iconCls: 'button-delete',
							text: 'Delete',
							handler: function() {
								var sm = me.frameGrid.getSelectionModel();
								Ext.Msg.show({
								     title:'Delete Record?',
								     msg: 'You are deleting a record permanently, this cannot be undone. Proceed?',
								     buttons: Ext.Msg.YESNO,
								     icon: Ext.Msg.QUESTION,
								     fn: function(btn)	{
								     	if(btn === 'yes') {
								     		me.frameGrid.store.remove(sm.getSelection());
								     		me.frameGrid.store.sync();
								     	}
								     }
								});}
						},
						{
							iconCls: 'button-insert',
							text: 'Insert',
							handler: function() {
								var newRecord = Ext.create(me.frameGrid.store.model);
								me.frameGrid.store.insert(0, newRecord);
								
								// write about this section in tutorial
								var sm = me.frameGrid.getSelectionModel();
								me.frameGrid.on('edit', function() {
									var record = sm.getSelection();
									me.frameGrid.store.sync();
									me.frameGrid.store.remove(record);
									me.frameGrid.store.load();
								});}
						},						
						{
							iconCls: 'button-edit',
							text: 'Edit',
							handler: function() {
								me.showDetail();
								me.refreshDetail();
			            	} 
						}],
						
				}]
        }, cfg)]);
    },

    showDetail: function () {
    	this.frameGrid.hide();
    	this.frameDetail.show();
	},
    
    refreshDetail: function () {
    	var record = this.frameGrid.getSelectionModel().getSelection();
    	this.frameDetail.getForm().loadRecord(record[0]);
	},

    beforecloseDetail: function () {
    	this.frameDetail.hide();
    	this.frameGrid.show();
	}
    
});
